﻿<script setup>
    import { ref, reactive, computed } from 'vue';

    const parentMessage = ref('Parent');
    const items = ref([{ message: 'Foo' }, { message: 'Bar' }]);

    /*const myObject = reactive({
        title: 'hello',
        author: 'jslfj',
        publishedAt: '22323'
    });*/


    /*items.forEach((item, index) => {
        console.log(parentMessage, item.message, index);
    })*/

    /*const numbers = ref([2, 4, 3, 5, 7, 6]);
    const filterNumbers = computed(() => {
        return numbers.value.filter((n) => n % 2 === 0);
    });*/


    const sets = ref([
        [1, 2, 3, 4, 5],
        [6, 7, 8, 9, 10]
    ]);

    function even(numbers) {
        return numbers.filter((number) => number % 2 === 0)
    }
</script>

<template>
    <!--<li v-for="item in items">-->
    <!-- {{ item.message }}-->
    <!--</li>-->

   <!-- <li v-for="(item, index) in items" class="vertical-text">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>

    <li v-for="{message} in items">
        {{message}}
    </li>

    <ul>
        <li v-for="value in myObject">
            {{value}}
        </li>
    </ul>

    <li v-for="(value, key) in myObject">
        {{key}}:{{value}}
    </li>

    <li v-for="(value, key, index) in myObject">
        {{index}}.{{key}}.{{value}}
    </li>

    <p></p>
    <span v-for="n in 10">{{n}}</span>

    <hr />
    <ul>
        <template v-for="item in items">
            <li>{{item.message}}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
    <hr />

    <ul>
        <li v-for="n in numbers">{{n}}</li>
    </ul>
    
    <hr />
    <ol>
        <li v-for="n in filterNumbers">{{n}}</li>
    </ol>-->
    
    <ul v-for="numbers in sets">
        <li v-for="n in even(numbers)">
            {{n}}
        </li>
    </ul>
</template>

<style>
    .vertical-text {
        /*writing-mode: vertical-lr;*/ /*从左到右竖排*/
/*        text-orientation: upright;*/
        /*保持字符直立*/

        display:flex;
        /*flex-direction:column;*//*竖排*/
    }
</style>